<template>
  <div class="index" :class="isShow ? 'bgc-night' : 'bgc-sun'">
    <div class="nav">
      <div class="time">
        <div>{{ date[1] }}</div>
        <div>{{ date[0] }}</div>
      </div>
      <div class="title">{{ date[2] }}</div>
      <div class="user_Img">
        <img src="../assets/images/tx.png" @click="turnToMy()"/>
      </div>
    </div>
    <div class="banner">
      <van-swipe :autoplay="3000" indicator-color="white" touchable>
        <van-swipe-item v-for="(item, index) in bannerList" :key="index">
          <div class="img-box">
            <img :src="item.image" @click="turnToDetail(item.id)" />
            <div class="bannerList">
              {{ item.title }}
              <div class="author">{{ item.hint }}</div>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 推荐 -->
    <div class="stories" v-for="(item, index) in messageList" :key="index" @click="turnToDetail(item.id)">
      <div class="message">
        <div class="message_title">{{ item.title }}</div>
        <div class="message_hint">{{ item.hint }}</div>
      </div>
      <div class="message_img"><img :src="item.images" alt="" /></div>
    </div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoading"
      offset="1"
      immediate-check
    >
      <div v-for="(item, index) in historyList" :key="index">
        <div class="flex">
        <div>{{(dayList[index]).slice(4,6)}}月</div>
        <div>{{dayList[index].slice(6,8)}}日</div>
        <div class="divider"></div></div>
           <div class="stories" v-for="(item, index) in historyList[index]" :key="index"  @click="turnToDetail(item.id)">
      <div class="message">
        <div class="message_title">{{ item.title }}</div>
        <div class="message_hint">{{ item.hint }}</div>
      </div>
      <div class="message_img"><img :src="item.images" alt="" /></div>
    </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      date: [],
      lastDay: "",
      List: [],
      bannerList: [],
      messageList: [],
      historyList: [],
      dayList:[],
      loading: false,
      finished: false,
      isShow: localStorage.getItem("theme") === "true" ? true : false,
    };
  },
  created() {
    this.getDate();
    this.getBanner();
    this.getHistory();
    // console.log(this.historyList);
  },
  methods: {
    getDate() {
      this.date = [];
      var now = new Date();
      let month = now.getMonth();
      let day = now.getDate();
      let time = now.getHours();
      let year = now.getFullYear();
      let title = "";
      let MonthList=[
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月",
      ];
      this.date.push(MonthList[month]);
      this.date.push(day);
      if (time < 12) {
        title = "早上好！";
      } else if (time >= 12 && time < 14) {
        title = "中午好！";
      } else if (time >= 14 && time < 18) {
        title = "下午好！";
      } else if (time >= 18 && time < 22) {
        title = "晚上好";
      } else {
        title = "早点休息";
      }
      month=++month;
      if(month<10){
        month ="0"+month;
      }
      if(day<10){
        day = "0" + day;
      }
      this.date.push(title);
      this.lastDay = (""+year+month+day);
    },
    getBanner() {
      this.axios({
        method: "GET",
        url: "https://apis.netstart.cn/zhihudaily/stories/latest",
      }).then((res) => {
        this.List = res.data;
        this.bannerList = this.List.top_stories;
        this.messageList = this.List.stories;
      });
    },
    turnToDetail(storyid) {
      this.$router.push({name:"Detail"});
      localStorage.setItem("storyid",storyid);
    },
    getHistory() {
      this.axios({
        method: "GET",
        url: "https://apis.netstart.cn/zhihudaily/stories/before/" + this.lastDay,
      }).then((res) => {
        this.historyList.push(res.data.stories);
            this.lastDay = res.data.date;
            this.dayList.push(res.data.date)

      });
    },
    onLoading() {
      setTimeout(() => {
        this.getHistory();
        this.loading = false;
      }, 2000);
    },
    turnToMy(){
      this.$router.push({name:"My"});
    }
  },
};
</script>

<style lang="postcss" scoped>
.nav {
  display: flex;
}
.time {
  flex: 1;
  font-size: 10px;
  text-align: center;
  vertical-align: middle;
}
.time :nth-child(1) {
  font-size: 20px;
  font-weight: bolder;
}
.title {
  flex: 8;
  text-align: left;
  font-size: 20px;
  border-left: 1px solid #cfcfcf;
  padding-left: 10px;
  line-height: 40px;
  font-weight: bold;
}
.user_Img {
  flex: 1;
}
.user_Img img {
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.banner {
  margin-top: 10px;
  height: 300px;
  width: 100%;
}
.van-swipe-item img {
  height: 300px;
  width: 100%;
}
.bannerList {
  position: absolute;
  bottom: 20px;
  left: 10px;
  z-index: 1;
  color: white;
  font-size: 18px;
  text-align: left;
}
.author {
  text-align: left;
  color: white;
  font-size: 10px;
}
.van-swipe__indicators {
  left: 90%;
}

.stories {
  width: 100%;
  height: 90px;
  display: flex;
  padding-top: 10px;
}
.message {
  text-align: left;
  padding: 10px;
  flex: 8;

}
.message_img {
  flex: 4;
}
.message_title {
  font-size: 15px;
  font-weight: bold;
}
.message_hint {
  color: gray;
}
.message_img img {
  width: 70%;
  height: 80%;
}
.flex{
  display: flex;
  color: gray;
  padding-left: 10px;
}
.divider{
  flex: 1;
  height: 1px;
  background-color: gray;
  margin-top:8px ;
}
</style>